import React, { Component } from 'react'
/**
 * 一、React事件处理的绑定方式
 * 1、<button onClick={()=>{事件处理函数}}></button>
 * 这种方式的缺陷就是事件处理函数的处理代码内容过多的时候，代码的可读性会很低,该事件处理函数不能复用
 * 2、<button onClick={this.类中的成员方法名}></button>
 * 这种方式的好处较第1种方式可读性要强,这种方式成员方法中不能方法this对象，通过改变this指向来解决这个问题
 * 更改this指向有三种方式
 * (1) call的方式
 * (2) apply的方式
 * (3) bind方式
 * 如果在调用类中的成员方法的时候，找不到this指向，具体的解决方法如下
 * (1)<button onClick={this.成员方法名.bind(this)}></button>
 * (2)在构造函数中进行this指向的改变
 * constructor(){
    super()
    //在构造函数中进行this指向的改变
    this.成员方法名=this.成员方法名.bind(this)
   }
   比较适合ES5包括之前的版本处理方法
   3、<button onClick={this.箭头函数名}></button>
   在ES6的时候才可以使用，比较推荐事件这种方式
   对于传递参数不友好
  二、事件传递参数
  1、如果调用函数的时候没有传递实，但是在声明函数有形参，这个形参是SyntheticBaseEvent对象（合成事件对象）
  2、<button onClick={()=>{this.成员方法([实参列表])}}>传参1</button>
  3、<button onClick={e=>this.箭头函数(实参1,实参2,e)}>传参2</button>
  三、取消默认行为
   原生js中可以使用return false和event.preventDefault()两种方式来解决
   React中只能使用event.preventDefault()
  四、合成事件
  1、原生事件的缺陷
    1）存在浏览器的兼容问题
    2）所有的事件都绑定到真实DOM上
  2、并没有绑定到真实DOM元素上
    1）React17版本/React18版本事件绑定在root容器上
    2) React16版本事件是绑定在document上的
  3、为什么需要合成事件
    1）为了抹平浏览器的差异
    2）合成事件对象使用事件池方式来进行统一管理
  4、React的事件和普通的HTML事件有什么不同
    1)对于事件名称命名⽅式，原⽣事件为全⼩写，react 事件采⽤⼩驼峰；
    2)对于事件函数处理语法，原⽣事件为字符串，react 事件为函数；
    3)react 事件不能采⽤ return false 的⽅式来阻⽌浏览器的默认⾏为，⽽必须要地明确地调⽤preventDefault()来阻⽌默认⾏为
 */

    export default class EventHandle extends Component {
  constructor(){
    super()
    //在构造函数中进行this指向的改变
    this.clickHandle=this.clickHandle.bind(this)
  }
  clickHandle(e){
    console.log('事件绑定方式2',e);
  }
  clickHandle2=(e)=>{
    console.log('事件绑定方式3,箭头函数的写法',e);
  }
  getParam1(arg1,arg2,arg3,arg4){
    console.log('getParams1',arg1,arg2,arg3,arg4);
  }
  getParam2(arg1,arg2,arg3){
    console.log('arg1',arg1);
    console.log('arg2',arg2);
    console.log('arg3',arg3);
  }
  getParam3(arg1,arg2,arg3){
    console.log('arg1',arg1);
    console.log('arg2',arg2);
    console.log('arg3',arg3);
  }
  go(arg1,arg2){
   if(window.confirm(`您确定要进入蜗牛官网吗?我给您推荐一个网站${arg2}点击进入`)){
      window.location.href="http://www.zhaijizhe.cn"
      arg1.preventDefault() 
     
   }
  }
  render() {
    return (
      <>
         <div>
         <button onClick={()=>{console.log('事件处理函数')}}>绑定方式1</button>
         {/* <button onClick={this.clickHandle.bind(this)}>绑定方式2</button> */}
         <button onClick={this.clickHandle}>绑定方式2</button>
         <button onClick={this.clickHandle2}>绑定方式3</button>
         <hr />
         <button onClick={()=>{this.getParam1(10,20,30,40)}}>传参1</button>
         <button onClick={(e)=>{this.getParam2(10,e,50)}}>传参2</button>
         <button onClick={e=>this.getParam3(40,23,e)}>传参2-other</button>
         <hr />
         <a href="http://www.woniuxy.com" onClick={e=>this.go(e,'http://www.zhaijizhe.cn')}>蜗牛学院</a>
      </div>
      </>

    )
  }
}
